<template>
  <div class="app-container" style="height: 82vh; overflow-x: auto;" v-loading="loading">
    <el-form :model="queryParams" ref="queryRef" :inline="true">

      <el-form-item label="时间基准">
        <el-radio-group v-model="queryParams.selectedEpt">
          <el-radio label="D">全天</el-radio>
          <el-radio label="SD">白班</el-radio>
          <el-radio label="SN">夜班</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="时间" prop="dataTime" label-width="40px">
        <WeekTimePicker type="date" :options="disabledOptions" v-model="queryParams.dataTime" :clearable="false" style="width: 130px"/>
      </el-form-item>

      <el-form-item label="显示基准">
        <el-checkbox-group v-model="queryParams.showBase">
          <el-checkbox key="group" label="时间稼动率(%)" disabled>时间稼动率(%)</el-checkbox>
          <el-checkbox key="group" label="总DOWN机率(%)">总DOWN机率(%)</el-checkbox>
          <el-checkbox key="group" label="生产PM率(%)">生产PM率(%)</el-checkbox>
          <el-checkbox key="group" label="设备PM率(%)">设备PM率(%)</el-checkbox>
          <el-checkbox key="group" label="其他PM率(%)">其他PM率(%)</el-checkbox>
          <el-checkbox key="group" label="待机率(%)">待机率(%)</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <el-radio-group v-model="queryParams.radio" @change="getQueryData()">
          <el-radio-button label="默认"/>
          <el-radio-button label="升序"/>
          <el-radio-button label="降序"/>
        </el-radio-group>
        <el-button style="margin-left: 20px;" type="primary" icon="Search" @click="getQueryData">查询</el-button>
        </el-form-item>
    </el-form>

    <template v-for="(item, index) in dataAll">
      <div ref="myChart" id="chart" v-if="item.goldVsReturnList[0].eqpAttribute1 === '时间稼动率(%)'" style="height: 240px; margin-bottom: 10px; border: 1px solid #aaa; border-radius: 4px;"></div>
      <div ref="myChart" id="chart" style="height: 260px; margin-bottom: 10px; border: 1px solid #aaa; border-radius: 4px;"></div>
      <t-ag-grid
        style="margin-bottom: 10px;"
        :style="{ height: getHeight(item.goldVsReturnList.length)}"
        class="add-margin"
        :column-defs="columnMBB"
        :row-data="item.goldVsReturnList"
        :row-buffer="20"
        :header-height="0"
        align="center"
        :getRowStyle ="getRowStyle"
        :defaultColDef = "{
          suppressMenu:true,
          flex: 1
        }"
        @cell-clicked="onCellClicked($event, index, qwe)"
        header-align="center"
      />

    </template>
  </div>
</template>

<script setup name="TestPages">
  import moment from 'moment'
  import * as echarts from 'echarts'
  import { listINFO, columnMBB, getTableData, chartOptios } from "./config"
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const queryParams = reactive({
    dataTime: moment().subtract(1, 'days').format('YYYY-MM-DD'),
    selectedEpt: 'D',
    showBase: ['时间稼动率(%)', '总DOWN机率(%)', '生产PM率(%)', '设备PM率(%)', '其他PM率(%)', '待机率(%)'],
    radio: '默认'
  })

  const props = defineProps({
    Mbb: {
      type: Object
    }
  })

  const loading = ref(false)
  const dataAll = ref([])
  const myChart = ref()
  let chart = null

  const disabledOptions = {
    disabledDate (date) {
      return date && date.valueOf() > moment().valueOf()
    }
  }

  const getQueryData = () => {
    loading.value = true
    listINFO({
      dateTime: moment(queryParams.dataTime).format('YYYY-MM-DD'),
      dataType: queryParams.selectedEpt,
      eqpGroup: 'MBB',
      queryTypeList: queryParams.showBase
    }, queryParams.radio).then((res) => {
      loading.value = false
      dataAll.value = getTableData(res.rows)

      let getChartData = []

      getChartData[0] = {
        type:"时间稼动率(%)",
        goldVsReturnList: JSON.parse(JSON.stringify(dataAll.value))[0].goldVsReturnList.slice(0, 4)
      }
      getChartData[1] = {
        type:"总时间损失率(%)",
        goldVsReturnList: JSON.parse(JSON.stringify(dataAll.value))[0].goldVsReturnList.slice(-6)
      }
      getChartData = [...getChartData, ...JSON.parse(JSON.stringify(dataAll.value)).slice(1)]

      nextTick(() => {
        myChart.value?.forEach((item, index) => {

          item.mark = item.innerText

          chart = echarts.init(item)
          const resizeObserver = new ResizeObserver((entries, b) => {
            if(echarts.getInstanceByDom(item)){
              echarts.getInstanceByDom(item).resize()
            }
          })
          resizeObserver.observe(item)

          echarts.getInstanceByDom(item).setOption(chartOptios(getChartData, index, 'MBB', moment(queryParams.dataTime).format('YYYY-MM-DD').slice(-5)), true)
        })
      })
    })
  }

  const getRowStyle = (params) => {
    if(params.rowIndex === 0){
      return {
        background: '#bdd7ee'
      }
    }
  }

  const getHeight = (length) => {
    switch (length) {
      case 4:
        return '131px'
      case 6:
        return '195px'
      case 7:
        return '227px'
      case 8:
        return '259px'
      case 9:
        return '291px'
      case 10:
        return '323px'
      default:
        break
    }
  }

  watch(() => props.Mbb, val => {

    queryParams.dataTime = val.dataTime
    queryParams.selectedEpt = val.selectedEpt

    getQueryData()

  }, { deep: true })

  const onCellClicked = ({ rowIndex, value, colDef }, byName, idx) => {
    if(!rowIndex && colDef.field !== 'eqpAttribute1'){
      router.push({
        path: '/indexAnalyse/shiftManage/mainTrend',
        state: {
          tabName: 'MBB',
          dataTime: queryParams.dataTime,
          machineId: `H05-${value}`,
          selectedEpt: queryParams.selectedEpt === 'D' ? '单日' :  '班次'
        }
      })
    }
  }
</script>

<style lang="less" scoped>

.app-container {
  padding: 0px 20px;
}
.el-radio {
  margin-right: 6px;
}

.el-checkbox {
  margin-right: 12px;
}
</style>

